export default {
    data() {
        return {
            open: false,
            nav: [
                {
                    name: 'Home',
                    url: './index.html'
                },
                {
                    name: 'AI Tarot Reading',
                    url: './ai.html'
                },
                {
                    name: 'Daily Tarot',
                    url: './daily.html'
                },
                {
                    name: 'Card Meanings',
                    url: './meanings.html'
                },
                {
                    name: 'Blog',
                    url: 'blog.html'
                }
            ]
        }
    },
    methods: {

    },
    template: `
    <div style="position: sticky;top: 0;z-index: 999999;">
        <header>
            <div id="menu" :class="{open: open}" @click="open = !open">
                <span></span>
            </div>
            <a id="logo" href="index.html">
                <img src="./imgs/logo.png" alt="logo">
                <span>Tarot</span>
            </a>
            <nav>
                <a class="nav-item" v-for="item in nav" :href="item.url">
                    {{ item.name }}
                </a>
            </nav>
        </header>
        <nav class="mobile-nav" :class="{open: open}">
            <a class="nav-item" v-for="item in nav" :href="item.url">
                {{ item.name }}
            </a>
        </nav>
    </div>
    `
}